<template>
	<view class="container">
		<view class="ipt">
			<input type="text" value="" v-model="ipt" placeholder="请输入地址" @focus="getFocus" @blur="loseFocus" />
		</view>
		<view class="list" v-if="focus">
			<view class="list_item" v-for="(item,index) in list" :key="index" @click="getIpt(index)">
				<image src="/static/img/agent/address.png" mode="widthFix"></image>
				<text>{{item}}</text>
			</view>
		</view>

		<view class="btn">
			<button type="default" @click="save">确认保存</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ipt: '',
				focus: false,
				list: [
					'东莞市东城市万达广场',
					'东莞市东城市万达广场1'
				]
			}
		},
		onLoad() {

		},
		methods: {
			getFocus() {
				this.focus = true
			},
			loseFocus() {
				// this.focus = false
			},
			getIpt(index) {
				this.ipt = this.list[index]
				this.focus = false
			},
			save() {
				uni.navigateTo({
					url: '/pages/agent/index/detail'
				})
			}
		},

	}
</script>

<style scoped lang="scss">
	.container {
		width: 100%;
		height: 100%;
		background-color: #f6f6f6;
	}

	.ipt {
		width: calc(100%);
		padding: 0 30upx;
		height: 90upx;
		background-color: #FFFFFF;

		input {
			width: 100%;
			height: 100%;
		}

		border-bottom: 1upx solid #f6f6f6;
	}

	.list {
		width: calc(100%);
		padding: 0 30upx;
		background-color: #FFFFFF;

		.list_item {
			width: 100%;
			height: 90upx;
			display: flex;
			align-items: center;

			image {
				width: 30upx;
				margin-right: 10upx;
			}
		}
	}

	.btn {
		width: calc(100%);
		height: 90upx;
		border-radius: 45upx;
		position: fixed;
		bottom: 50upx;
		left: 30upx;
		overflow: hidden;

		button {
			width: 100%;
			height: 90upx;
			line-height: 90upx;
			color: #FFFFFF;
			background-color: #3fb8ff;
		}


	}
</style>
